<script setup>
import {
  Management,
  Menu,
  User,
  UserFilled,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
} from "@element-plus/icons-vue";
import { _$, $, to } from "./index";
import { useCurrentUserStore } from "@/stores/currentUser";
import { storeToRefs } from "pinia";
const store = useCurrentUserStore();
const { headImage } = storeToRefs(store);
const uploadServerUrl = `${import.meta.env.VITE_API_SERVER}`;
</script>

<template>
  <el-container class="layout-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="header-left">
        <img src="@/assets/imgs/logo.png" />
        <div class="title">后台管理系统</div>
      </div>
      <el-dropdown placement="bottom-end" @command="$.onHandleClick">
        <span class="el-dropdown__box">
          <el-avatar :src="`${uploadServerUrl}${headImage}`" />
          <el-icon>
            <CaretBottom />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile" :icon="User"
              >基本资料</el-dropdown-item
            >
            <el-dropdown-item command="avatar" :icon="Crop"
              >更换头像</el-dropdown-item
            >
            <el-dropdown-item command="password" :icon="EditPen"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item command="logout" :icon="SwitchButton"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <!-- 主体-->
    <el-main>
      <!--  侧边栏  -->
      <div class="main-left">
        <el-menu
          router
          :default-active="_$.state.activeIndex"
          @select="$.onChangeMenu"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Management />
              </el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/manage/news-type">
              <span>资讯分类管理</span>
            </el-menu-item>
            <el-menu-item index="/manage/news">
              <span>资讯管理</span>
            </el-menu-item>
            <el-menu-item index="/manage/disease">
              <span>疾病信息管理</span>
            </el-menu-item>
            <el-menu-item index="/manage/allergy">
              <span>过敏信息管理</span>
            </el-menu-item>
            <el-menu-item index="/manage/recipe">
              <span>食谱信息管理</span>
            </el-menu-item>
            <el-menu-item index="/manage/recipe-type">
              <span>食谱分类管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Menu />
              </el-icon>
              <span>用户管理</span>
            </template>
<!--            <el-menu-item index="/manage/user/admin">-->
<!--              <span>管理员信息</span>-->
<!--            </el-menu-item>-->
            <el-menu-item index="/manage/user/normal">
              <span>用户信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/manage/person/base">
              <span>基本资料</span>
            </el-menu-item>
            <el-menu-item index="/manage/person/avatar">
              <span>更换头像</span>
            </el-menu-item>
            <el-menu-item index="/manage/person/modify-pwd">
              <span>修改密码</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--右侧区域 -->
      <div class="main-right">
        <router-view />
      </div>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  background-color: #f6f6f6;
  min-height: 100vh;

  .el-header {
    display: flex;
    background-color: #ffab4e;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: space-between;

    .header-left {
      width: 200px;
      height: 60px;
      padding-left: 10px;
      display: flex;
      align-items: center;
    }

    .header-left img {
      width: 35px;
      height: 35px;
    }

    .header-left .title {
      flex: 1;
      margin-left: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #010101;
    }

    .el-dropdown__box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .el-main {
    padding: 0%;
    display: flex;
    .main-left {
      width: 200px;
      min-height: calc(100vh - 60px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .main-right {
      flex: 1;
      width: 0;
      padding: 10px;
    }

    .el-menu {
      background-color: #fff;
      border-right: none;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
}
</style>
